import React from 'react'

import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button ,Radio} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;


import PanelBox from '../../../components/PanelBox';

import './index.less'


class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    iconName:''
  };
  
  checkedIcon = (event) => {
    const { close,choiceIcon } = this.props;
    choiceIcon({ name:event.target.dataset.type});
    close();
  }
  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 14,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    
    return (
      <Row align="middle">
        <Col className="tit">常用图标</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="lock"> <Icon type="lock" data-type="lock"  className="iconClass" />lock</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="unlock"> <Icon type="unlock" data-type="unlock"  className="iconClass" />unlock</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="area-chart"> <Icon type="area-chart" data-type="area-chart"  className="iconClass" />area-chart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pie-chart"> <Icon type="pie-chart" data-type="pie-chart"  className="iconClass" />pie-chart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="bar-chart"> <Icon type="bar-chart" data-type="bar-chart"  className="iconClass" />bar-chart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="dot-chart"> <Icon type="dot-chart" data-type="dot-chart"  className="iconClass" />dot-chart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="bars"> <Icon type="bars" data-type="bars"  className="iconClass" />bars</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="book"> <Icon type="book" data-type="book"  className="iconClass" />book</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="calendar"> <Icon type="calendar" data-type="calendar"  className="iconClass" />calendar</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud"> <Icon type="cloud" data-type="cloud"  className="iconClass" />cloud</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud-download"> <Icon type="cloud-download" data-type="cloud-download"  className="iconClass" />cloud-download</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="code"> <Icon type="code" data-type="code"  className="iconClass" />code</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="code-o"> <Icon type="code-o" data-type="code-o"  className="iconClass" />code-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="copy"> <Icon type="copy" data-type="copy"  className="iconClass" />copy</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="credit-card"> <Icon type="credit-card" data-type="credit-card"  className="iconClass" />credit-card</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="delete"> <Icon type="delete" data-type="delete"  className="iconClass" />delete</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="desktop"> <Icon type="desktop" data-type="desktop"  className="iconClass" />desktop</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="download"> <Icon type="download" data-type="download"  className="iconClass" />download</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="edit"> <Icon type="edit" data-type="edit"  className="iconClass" />edit</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="ellipsis"> <Icon type="ellipsis" data-type="ellipsis"  className="iconClass" />ellipsis</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file"> <Icon type="file" data-type="file"  className="iconClass" />file</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-text"> <Icon type="file-text" data-type="file-text"  className="iconClass" />file-text</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-unknown"> <Icon type="file-unknown" data-type="file-unknown"  className="iconClass" />file-unknown</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-pdf"> <Icon type="file-pdf" data-type="file-pdf"  className="iconClass" />file-pdf</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-excel"> <Icon type="file-excel" data-type="file-excel"  className="iconClass" />file-excel</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-jpg"> <Icon type="file-jpg" data-type="file-jpg"  className="iconClass" />file-jpg</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-ppt"> <Icon type="file-ppt" data-type="file-ppt"  className="iconClass" />file-ppt</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="file-add"> <Icon type="file-add" data-type="file-add"  className="iconClass" />file-add</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="folder"> <Icon type="folder" data-type="folder"  className="iconClass" />folder</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="folder-open"> <Icon type="folder-open" data-type="folder-open"  className="iconClass" />folder-open</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="folder-add"> <Icon type="folder-add" data-type="folder-add"  className="iconClass" />folder-add</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="hdd"> <Icon type="hdd" data-type="hdd"  className="iconClass" />hdd</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="frown"> <Icon type="frown" data-type="frown"  className="iconClass" />frown</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="frown-o"> <Icon type="frown-o" data-type="frown-o"  className="iconClass" />frown-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="meh"> <Icon type="meh" data-type="meh"  className="iconClass" />meh</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="meh-o"> <Icon type="meh-o" data-type="meh-o"  className="iconClass" />meh-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="smile"> <Icon type="smile" data-type="smile"  className="iconClass" />smile</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="smile-o"> <Icon type="smile-o" data-type="smile-o"  className="iconClass" />smile-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="inbox"> <Icon type="inbox" data-type="inbox"  className="iconClass" />inbox</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="laptop"> <Icon type="laptop" data-type="laptop"  className="iconClass" />laptop</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="appstore-o"> <Icon type="appstore-o" data-type="appstore-o"  className="iconClass" />appstore-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="appstore"> <Icon type="appstore" data-type="appstore"  className="iconClass" />appstore</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="line-chart"> <Icon type="line-chart" data-type="line-chart"  className="iconClass" />line-chart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="link"> <Icon type="link" data-type="link"  className="iconClass" />link</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="mail"> <Icon type="mail" data-type="mail"  className="iconClass" />mail</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="mobile"> <Icon type="mobile" data-type="mobile"  className="iconClass" />mobile</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="notification"> <Icon type="notification" data-type="notification"  className="iconClass" />notification</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="paper-clip"> <Icon type="paper-clip" data-type="paper-clip"  className="iconClass" />paper-clip</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="picture"> <Icon type="picture" data-type="picture"  className="iconClass" />picture</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="poweroff"> <Icon type="poweroff" data-type="poweroff"  className="iconClass" />poweroff</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="reload"> <Icon type="reload" data-type="reload"  className="iconClass" />reload</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="search"> <Icon type="search" data-type="search"  className="iconClass" />search</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="setting"> <Icon type="setting" data-type="setting"  className="iconClass" />setting</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="share-alt"> <Icon type="share-alt" data-type="share-alt"  className="iconClass" />share-alt</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="shopping-cart"> <Icon type="shopping-cart" data-type="shopping-cart"  className="iconClass" />shopping-cart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tablet"> <Icon type="tablet" data-type="tablet"  className="iconClass" />tablet</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tag"> <Icon type="tag" data-type="tag"  className="iconClass" />tag</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tag-o"> <Icon type="tag-o" data-type="tag-o"  className="iconClass" />tag-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tags"> <Icon type="tags" data-type="tags"  className="iconClass" />tags</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tags-o"> <Icon type="tags-o" data-type="tags-o"  className="iconClass" />tags-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="to-top"> <Icon type="to-top" data-type="to-top"  className="iconClass" />to-top</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="upload"> <Icon type="upload" data-type="upload"  className="iconClass" />upload</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="user"> <Icon type="user" data-type="user"  className="iconClass" />user</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="video-camera"> <Icon type="video-camera" data-type="video-camera"  className="iconClass" />video-camera</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="home"> <Icon type="home" data-type="home"  className="iconClass" />home</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="loading"> <Icon type="loading" data-type="loading"  className="iconClass" />loading</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="loading-3-quarters"> <Icon type="loading-3-quarters" data-type="loading-3-quarters"  className="iconClass" />loading-3-quarters</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud-upload-o"> <Icon type="cloud-upload-o" data-type="cloud-upload-o"  className="iconClass" />cloud-upload-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud-download-o"> <Icon type="cloud-download-o" data-type="cloud-download-o"  className="iconClass" />cloud-download-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud-upload"> <Icon type="cloud-upload" data-type="cloud-upload"  className="iconClass" />cloud-upload</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="cloud-o"> <Icon type="cloud-o" data-type="cloud-o"  className="iconClass" />cloud-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="star-o"> <Icon type="star-o" data-type="star-o"  className="iconClass" />star-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="star"> <Icon type="star" data-type="star"  className="iconClass" />star</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="heart-o"> <Icon type="heart-o" data-type="heart-o"  className="iconClass" />heart-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="heart"> <Icon type="heart" data-type="heart"  className="iconClass" />heart</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="environment"> <Icon type="environment" data-type="environment"  className="iconClass" />environment</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="environment-o"> <Icon type="environment-o" data-type="environment-o"  className="iconClass" />environment-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="eye"> <Icon type="eye" data-type="eye"  className="iconClass" />eye</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="eye-o"> <Icon type="eye-o" data-type="eye-o"  className="iconClass" />eye-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="camera"> <Icon type="camera" data-type="camera"  className="iconClass" />camera</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="camera-o"> <Icon type="camera-o" data-type="camera-o"  className="iconClass" />camera-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="save"> <Icon type="save" data-type="save"  className="iconClass" />save</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="team"> <Icon type="team" data-type="team"  className="iconClass" />team</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="solution"> <Icon type="solution" data-type="solution"  className="iconClass" />solution</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="phone"> <Icon type="phone" data-type="phone"  className="iconClass" />phone</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="filter"> <Icon type="filter" data-type="filter"  className="iconClass" />filter</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="exception"> <Icon type="exception" data-type="exception"  className="iconClass" />exception</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="export"> <Icon type="export" data-type="export"  className="iconClass" />export</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="customer-service"> <Icon type="customer-service" data-type="customer-service"  className="iconClass" />customer-service</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="qrcode"> <Icon type="qrcode" data-type="qrcode"  className="iconClass" />qrcode</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="scan"> <Icon type="scan" data-type="scan"  className="iconClass" />scan</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="like"> <Icon type="like" data-type="like"  className="iconClass" />like</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="like-o"> <Icon type="like-o" data-type="like-o"  className="iconClass" />like-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="dislike"> <Icon type="dislike" data-type="dislike"  className="iconClass" />dislike</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="dislike-o"> <Icon type="dislike-o" data-type="dislike-o"  className="iconClass" />dislike-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="message"> <Icon type="message" data-type="message"  className="iconClass" />message</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pay-circle"> <Icon type="pay-circle" data-type="pay-circle"  className="iconClass" />pay-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pay-circle-o"> <Icon type="pay-circle-o" data-type="pay-circle-o"  className="iconClass" />pay-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="calculator"> <Icon type="calculator" data-type="calculator"  className="iconClass" />calculator</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pushpin"> <Icon type="pushpin" data-type="pushpin"  className="iconClass" />pushpin</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pushpin-o"> <Icon type="pushpin-o" data-type="pushpin-o"  className="iconClass" />pushpin-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="bulb"> <Icon type="bulb" data-type="bulb"  className="iconClass" />bulb</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="select"> <Icon type="select" data-type="select"  className="iconClass" />select</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="switcher"> <Icon type="switcher" data-type="switcher"  className="iconClass" />switcher</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="rocket"> <Icon type="rocket" data-type="rocket"  className="iconClass" />rocket</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="bell"> <Icon type="bell" data-type="bell"  className="iconClass" />bell</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="disconnect"> <Icon type="disconnect" data-type="disconnect"  className="iconClass" />disconnect</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="database"> <Icon type="database" data-type="database"  className="iconClass" />database</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="compass"> <Icon type="compass" data-type="compass"  className="iconClass" />compass</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="barcode"> <Icon type="barcode" data-type="barcode"  className="iconClass" />barcode</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="hourglass"> <Icon type="hourglass" data-type="hourglass"  className="iconClass" />hourglass</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="key"> <Icon type="key" data-type="key"  className="iconClass" />key</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="flag"> <Icon type="flag" data-type="flag"  className="iconClass" />flag</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="layout"> <Icon type="layout" data-type="layout"  className="iconClass" />layout</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="printer"> <Icon type="printer" data-type="printer"  className="iconClass" />printer</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="sound"> <Icon type="sound" data-type="sound"  className="iconClass" />sound</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="usb"> <Icon type="usb" data-type="usb"  className="iconClass" />usb</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="skin"> <Icon type="skin" data-type="skin"  className="iconClass" />skin</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="tool"> <Icon type="tool" data-type="tool"  className="iconClass" />tool</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="sync"> <Icon type="sync" data-type="sync"  className="iconClass" />sync</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="wifi"> <Icon type="wifi" data-type="wifi"  className="iconClass" />wifi</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="car"> <Icon type="car" data-type="car"  className="iconClass" />car</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="schedule"> <Icon type="schedule" data-type="schedule"  className="iconClass" />schedule</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="user-add"> <Icon type="user-add" data-type="user-add"  className="iconClass" />user-add</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="user-delete"> <Icon type="user-delete" data-type="user-delete"  className="iconClass" />user-delete</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="usergroup-add"> <Icon type="usergroup-add" data-type="usergroup-add"  className="iconClass" />usergroup-add</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="usergroup-delete"> <Icon type="usergroup-delete" data-type="usergroup-delete"  className="iconClass" />usergroup-delete</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="man"> <Icon type="man" data-type="man"  className="iconClass" />man</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="woman"> <Icon type="woman" data-type="woman"  className="iconClass" />woman</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="shop"> <Icon type="shop" data-type="shop"  className="iconClass" />shop</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="gift"> <Icon type="gift" data-type="gift"  className="iconClass" />gift</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="idcard"> <Icon type="idcard" data-type="idcard"  className="iconClass" />idcard</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="medicine-box"> <Icon type="medicine-box" data-type="medicine-box"  className="iconClass" />medicine-box</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="red-envelope"> <Icon type="red-envelope" data-type="red-envelope"  className="iconClass" />red-envelope</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="coffee"> <Icon type="coffee" data-type="coffee"  className="iconClass" />coffee</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="copyright"> <Icon type="copyright" data-type="copyright"  className="iconClass" />copyright</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="trademark"> <Icon type="trademark" data-type="trademark"  className="iconClass" />trademark</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="safety"> <Icon type="safety" data-type="safety"  className="iconClass" />safety</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="wallet"> <Icon type="wallet" data-type="wallet"  className="iconClass" />wallet</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="bank"> <Icon type="bank" data-type="bank"  className="iconClass" />bank</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="trophy"> <Icon type="trophy" data-type="trophy"  className="iconClass" />trophy</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="contacts"> <Icon type="contacts" data-type="contacts"  className="iconClass" />contacts</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="global"> <Icon type="global" data-type="global"  className="iconClass" />global</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="shake"> <Icon type="shake" data-type="shake"  className="iconClass" />shake</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="api"> <Icon type="api" data-type="api"  className="iconClass" />api</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="fork"> <Icon type="fork" data-type="fork"  className="iconClass" />fork</Col>
      
        <Col className="tit">方向性图标</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="step-backward"> <Icon type="step-backward" data-type="step-backward"  className="iconClass" />step-backward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="step-forward"> <Icon type="step-forward" data-type="step-forward"  className="iconClass" />step-forward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="fast-backward"> <Icon type="fast-backward" data-type="fast-backward"  className="iconClass" />fast-backward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="fast-forward"> <Icon type="fast-forward" data-type="fast-forward"  className="iconClass" />fast-forward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="shrink"> <Icon type="shrink" data-type="shrink"  className="iconClass" />shrink</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="arrows-alt"> <Icon type="arrows-alt" data-type="arrows-alt"  className="iconClass" />arrows-alt</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="down"> <Icon type="down" data-type="down"  className="iconClass" />down</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="up"> <Icon type="up" data-type="up"  className="iconClass" />up</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="left"> <Icon type="left" data-type="left"  className="iconClass" />left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="right"> <Icon type="right" data-type="right"  className="iconClass" />right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="caret-up"> <Icon type="caret-up" data-type="caret-up"  className="iconClass" />caret-up</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="caret-down"> <Icon type="caret-down" data-type="caret-down"  className="iconClass" />caret-down</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="caret-left"> <Icon type="caret-left" data-type="caret-left"  className="iconClass" />caret-left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="caret-right"> <Icon type="caret-right" data-type="caret-right"  className="iconClass" />caret-right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="up-circle"> <Icon type="up-circle" data-type="up-circle"  className="iconClass" />up-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="down-circle"> <Icon type="down-circle" data-type="down-circle"  className="iconClass" />down-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="left-circle"> <Icon type="left-circle" data-type="left-circle"  className="iconClass" />left-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="right-circle"> <Icon type="right-circle" data-type="right-circle"  className="iconClass" />right-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="up-circle-o"> <Icon type="up-circle-o" data-type="up-circle-o"  className="iconClass" />up-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="down-circle-o"> <Icon type="down-circle-o" data-type="down-circle-o"  className="iconClass" />down-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="right-circle-o"> <Icon type="right-circle-o" data-type="right-circle-o"  className="iconClass" />right-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="left-circle-o"> <Icon type="left-circle-o" data-type="left-circle-o"  className="iconClass" />left-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="double-right"> <Icon type="double-right" data-type="double-right"  className="iconClass" />double-right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="double-left"> <Icon type="double-left" data-type="double-left"  className="iconClass" />double-left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="verticle-left"> <Icon type="verticle-left" data-type="verticle-left"  className="iconClass" />verticle-left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="verticle-right"> <Icon type="verticle-right" data-type="verticle-right"  className="iconClass" />verticle-right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="forward"> <Icon type="forward" data-type="forward"  className="iconClass" />forward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="backward"> <Icon type="backward" data-type="backward"  className="iconClass" />backward</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="rollback"> <Icon type="rollback" data-type="rollback"  className="iconClass" />rollback</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="enter"> <Icon type="enter" data-type="enter"  className="iconClass" />enter</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="retweet"> <Icon type="retweet" data-type="retweet"  className="iconClass" />retweet</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="swap"> <Icon type="swap" data-type="swap"  className="iconClass" />swap</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="swap-left"> <Icon type="swap-left" data-type="swap-left"  className="iconClass" />swap-left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="swap-right"> <Icon type="swap-right" data-type="swap-right"  className="iconClass" />swap-right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="arrow-up"> <Icon type="arrow-up" data-type="arrow-up"  className="iconClass" />arrow-up</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="arrow-down"> <Icon type="arrow-down" data-type="arrow-down"  className="iconClass" />arrow-down</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="arrow-left"> <Icon type="arrow-left" data-type="arrow-left"  className="iconClass" />arrow-left</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="arrow-right"> <Icon type="arrow-right" data-type="arrow-right"  className="iconClass" />arrow-right</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="play-circle"> <Icon type="play-circle" data-type="play-circle"  className="iconClass" />play-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="play-circle-o"> <Icon type="play-circle-o" data-type="play-circle-o"  className="iconClass" />play-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="up-square"> <Icon type="up-square" data-type="up-square"  className="iconClass" />up-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="down-square"> <Icon type="down-square" data-type="down-square"  className="iconClass" />down-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="left-square"> <Icon type="left-square" data-type="left-square"  className="iconClass" />left-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="right-square"> <Icon type="right-square" data-type="right-square"  className="iconClass" />right-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="up-square-o"> <Icon type="up-square-o" data-type="up-square-o"  className="iconClass" />up-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="down-square-o"> <Icon type="down-square-o" data-type="down-square-o"  className="iconClass" />down-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="left-square-o"> <Icon type="left-square-o" data-type="left-square-o"  className="iconClass" />left-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="right-square-o"> <Icon type="right-square-o" data-type="right-square-o"  className="iconClass" />right-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="login"> <Icon type="login" data-type="login"  className="iconClass" />login</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="logout"> <Icon type="logout" data-type="logout"  className="iconClass" />logout</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="menu-fold"> <Icon type="menu-fold" data-type="menu-fold"  className="iconClass" />menu-fold</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="menu-unfold"> <Icon type="menu-unfold" data-type="menu-unfold"  className="iconClass" />menu-unfold</Col>
       
        <Col className="tit">提示建议性图标</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="question"> <Icon type="question" data-type="question"  className="iconClass" />question</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="question-circle-o"> <Icon type="question-circle-o" data-type="question-circle-o"  className="iconClass" />question-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="question-circle"> <Icon type="question-circle" data-type="question-circle"  className="iconClass" />question-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="plus"> <Icon type="plus" data-type="plus"  className="iconClass" />plus</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="plus-circle-o"> <Icon type="plus-circle-o" data-type="plus-circle-o"  className="iconClass" />plus-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="plus-circle"> <Icon type="plus-circle" data-type="plus-circle"  className="iconClass" />plus-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pause"> <Icon type="pause" data-type="pause"  className="iconClass" />pause</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pause-circle-o"> <Icon type="pause-circle-o" data-type="pause-circle-o"  className="iconClass" />pause-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="pause-circle"> <Icon type="pause-circle" data-type="pause-circle"  className="iconClass" />pause-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="minus"> <Icon type="minus" data-type="minus"  className="iconClass" />minus</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="minus-circle-o"> <Icon type="minus-circle-o" data-type="minus-circle-o"  className="iconClass" />minus-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="minus-circle"> <Icon type="minus-circle" data-type="minus-circle"  className="iconClass" />minus-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="plus-square"> <Icon type="plus-square" data-type="plus-square"  className="iconClass" />plus-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="plus-square-o"> <Icon type="plus-square-o" data-type="plus-square-o"  className="iconClass" />plus-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="minus-square"> <Icon type="minus-square" data-type="minus-square"  className="iconClass" />minus-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="minus-square-o"> <Icon type="minus-square-o" data-type="minus-square-o"  className="iconClass" />minus-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="info"> <Icon type="info" data-type="info"  className="iconClass" />info</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="info-circle-o"> <Icon type="info-circle-o" data-type="info-circle-o"  className="iconClass" />info-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="info-circle"> <Icon type="info-circle" data-type="info-circle"  className="iconClass" />info-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="exclamation"> <Icon type="exclamation" data-type="exclamation"  className="iconClass" />exclamation</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="exclamation-circle-o"> <Icon type="exclamation-circle-o" data-type="exclamation-circle-o"  className="iconClass" />exclamation-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="exclamation-circle"> <Icon type="exclamation-circle" data-type="exclamation-circle"  className="iconClass" />exclamation-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="close"> <Icon type="close" data-type="close"  className="iconClass" />close</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="close-circle"> <Icon type="close-circle" data-type="close-circle"  className="iconClass" />close-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="close-circle-o"> <Icon type="close-circle-o" data-type="close-circle-o"  className="iconClass" />close-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="close-square"> <Icon type="close-square" data-type="close-square"  className="iconClass" />close-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="close-square-o"> <Icon type="close-square-o" data-type="close-square-o"  className="iconClass" />close-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="check"> <Icon type="check" data-type="check"  className="iconClass" />check</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="check-circle"> <Icon type="check-circle" data-type="check-circle"  className="iconClass" />check-circle</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="check-circle-o"> <Icon type="check-circle-o" data-type="check-circle-o"  className="iconClass" />check-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="check-square"> <Icon type="check-square" data-type="check-square"  className="iconClass" />check-square</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="check-square-o"> <Icon type="check-square-o" data-type="check-square-o"  className="iconClass" />check-square-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="clock-circle-o"> <Icon type="clock-circle-o" data-type="clock-circle-o"  className="iconClass" />clock-circle-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="clock-circle"> <Icon type="clock-circle" data-type="clock-circle"  className="iconClass" />clock-circle</Col>
       
        <Col className="tit">品牌和标识</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="android"> <Icon type="android" data-type="android"  className="iconClass" />android</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="android-o"> <Icon type="android-o" data-type="android-o"  className="iconClass" />android-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="apple"> <Icon type="apple" data-type="apple"  className="iconClass" />apple</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="apple-o"> <Icon type="apple-o" data-type="apple-o"  className="iconClass" />apple-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="windows"> <Icon type="windows" data-type="windows"  className="iconClass" />windows</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="windows-o"> <Icon type="windows-o" data-type="windows-o"  className="iconClass" />windows-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="ie"> <Icon type="ie" data-type="ie"  className="iconClass" />ie</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="chrome"> <Icon type="chrome" data-type="chrome"  className="iconClass" />chrome</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="github"> <Icon type="github" data-type="github"  className="iconClass" />github</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="aliwangwang"> <Icon type="aliwangwang" data-type="aliwangwang"  className="iconClass" />aliwangwang</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="aliwangwang-o"> <Icon type="aliwangwang-o" data-type="aliwangwang-o"  className="iconClass" />aliwangwang-o</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="dingding"> <Icon type="dingding" data-type="dingding"  className="iconClass" />dingding</Col>
        <Col className="col" onClick={this.checkedIcon} data-type="dingding-o"> <Icon type="dingding-o" data-type="dingding-o"  className="iconClass" />dingding-o</Col>

      </Row>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default WrappedRegistrationForm
